<template>
    <div class="users">
      <template v-if="isAdministrator">
            <el-table
            :data="userNames"
            style="width: 80%">
            <el-table-column
                prop="_id"
                label="编号"
                >
            </el-table-column>
            <el-table-column
                prop="userName"
                label="姓名"
                >
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="password"
                label="密码">
            </el-table-column>
            <el-table-column
                prop="tag"
                label="标签"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.tag === '管理员' ? 'primary' : 'success'"
                    disable-transitions>{{scope.row.tag}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small" v-if="scope.row.userName !== 'admin'">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="unfor" v-else>
            不好意思，没有权限！
        </div>
    </div>
</template>

<script>
import { mapState ,mapMutations,mapActions} from 'vuex';
import { DEL_USER } from '../mutation-types';
export default {
  name: "Users",
  data() {
    return {
      tableData: this.userNames,
      isAdministrator:false
    };
  },
  mounted(){
      
      localStorage.name == 'admin' ? this.isAdministrator = true : this.isAdministrator= false;
      this.getAllUsers();
  },
  computed:{
      ...mapState(['userNames'])
  },
  methods: {
      ...mapActions(['getAllUsers','delUser']),
      handleClick(row) {
        console.log(row);
        this.delUser(row).then((res)=>{
            this.$message({
                message: res.msg,
                type: 'success'
            });
        }).catch((error)=>{
           console.log(error)
        })
      }
    }
};
</script>

<style scoped lang='scss'>
.users{
     width: 90%;
     padding: 10px;
     height: 100%;
     /* background: #ffffff; */
     margin: auto;
     .unfor{
         width: 100%;
         line-height: 500px;
         text-align: center;
         font-size: 32px;
         color: rgb(255, 0, 0);
     }
    }
</style>